@import "../../_config.scss";

.dashboard-orders-index {
  // background-color: $color-default;
  // padding: 15px;

  .menu-list-row {
    .panel {
      box-shadow: none;

      .panel-heading {
        // border: 1px solid $color-border;
        padding-left: 0;
        padding-right: 0;
        &.types-head{
          background-color: $color-new-bg;
        }

        ul {
          margin: 0;
          padding: 0;
          list-style-type: none;
          display: flex;
          flex-flow: row nowrap;

          li {
            padding: 10px 15px;

            &.active {
              color: $color-private;
            }
          }
        }
      }

      .panel-body{
        .order-item-head{
          padding-top: 15px;
          padding-bottom: 15px;
          background-color: $color-bg;
          >div{
            color: $color-title;
          }
        }

        .order-item{
          margin-top: 20px;
          border: 1px solid $color-border;

          .item-top{
            background-color: $color-new-bg;
            padding: 12px 0;

            .normal-class, .other-class{
              padding: 0px 5px;
              border: 1px solid;
              border-radius: 4px;
              color: $color-private;
            }
            .other-class{
              color: #E4AF71;
            }

            div{
              span{
                color: $color-normal;
                &:first-child{
                  margin-right: 20px;
                }
              }
              a{
                &, &:hover, &:active,&:focus{
                  color: $color-title;
                  text-decoration: none;
                }
              }
            }
          }

          .item-info{
            display: flex;

            .col-sm-2{
              align-self: center;
            }

            .img-title-row{
              >div{
                padding-top: 10px;
                padding-bottom: 10px;
                border: 1px solid $color-border;
                border-top: 0;
                border-left: 0;

                &:last-child{
                  border-bottom: 0;
                }

                .pull-right{
                  margin-top: 10px;
                  margin-bottom: 10px;
                  padding-right: 15px;
                }
                .survey_fee{
                  margin-top: 10px;
                  margin-bottom: 10px;
                }

                a{
                  p{
                    width: 230px;
                    margin-top: 5px;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                  }
                }
              }
            }

            .product-img{
              width: 50px;
              height: 50px;
              float: left;
              margin-right: 10px;
            }

          }
        }

      }
      // .table {
      //   margin-top: 10px;
      //   border-collapse: separate;
      //   border-spacing:0px 10px;
      //
      //   thead {
      //     border: 1px solid $color-border;
      //     background-color: $color-bg;
      //
      //     tr {
      //       th {
      //         border: 0;
      //
      //         &:first-child {
      //           padding-left: 30px;
      //         }
      //
      //         &:last-child {
      //           padding-right: 30px;
      //         }
      //       }
      //     }
      //   }
      //
      //   tbody{
      //     tr{
      //     }
      //   }
      //
      //   tbody {
      //     .line {
      //       margin-top: 10px;
      //       border-top: 1px solid $color-border;
      //     }
      //
      //     tr {
      //       border: 0;
      //
      //       .show-link {
      //         a {
      //           &,
      //           &:active,
      //           &:focus,
      //           &:hover {
      //             color: $color-normal;
      //             text-decoration: none;
      //           }
      //         }
      //       }
      //
      //       td {
      //         border: 0;
      //
      //         &:first-child {
      //           padding-left: 30px;
      //         }
      //
      //         &:last-child {
      //           padding-right: 30px;
      //         }
      //
      //         .product-info {
      //           display: flex;
      //           flex-flow: row nowrap;
      //           align-items: center;
      //
      //           img {
      //             width: 50px;
      //             height: 50px;
      //             margin: 0 10px 0px 0;
      //           }
      //
      //           .info {
      //             max-width: 200px;
      //           }
      //         }
      //       }
      //     }
      //   }
      // }
    }
  }
}


.mine-tabs{
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row nowrap;
  li{
    padding: 0 15px;
    padding: 0 4vw;
    &:first-child{
      border-right: 1px solid #e5e5e5;
    }
    &.active{
      a{
        color: $color-private;
      }
    }
  }
}

.mobile-orders-index{
  background-color: #e5e5e5;
  height: 100%;

  .line{
    margin: 0;
    border-width: 10px;
    border-width: 2.66vw;
  }

  .state-ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    li{
      a{
        display: block;
        width: 100%;
        padding: 15px 0;
        font-size: 14px;
        font-size: 3.73vw;
      }
      &.active{
        a{
          color: #222222;
        }
      }
    }
  }

  .order-ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    margin-top: 4vw;

    li{
      padding: 10px 15px;
      padding: 2.66vw 4vw;
      &:not(:last-child){
        border-bottom: 15px solid #e5e5e5;
        border-bottom: 4vw solid #e5e5e5;
      }

      .top{
        font-size: 14px;
        font-size: 3.73vw;
        padding-bottom: 10px;
        padding-bottom: 2.66vw;
        border-bottom: 1px solid #e5e5e5;

        span{
          border: 1px solid $status-warning;
          padding: 2px;
          border-radius: 5px;
          color: $status-warning;
        }
      }

      .mid{
        padding: 15px 0;
        padding: 4vw 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e5e5e5;

        img{
          width: 90px;
          width: 24vw;
          height: 70px;
          width: 18.6vw;
        }

        h1{
          margin: 0;
          font-size: 14px;
          font-size: 3.73vw;
          color: #222222;
          padding: 0 10px;
          padding: 0 2.66vw;
          line-height: 15px;
          line-height: 4vw;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          max-height: 30px;
          max-height: 8vw;
        }
      }

      .bottom{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        padding: 4vw 0;

        .btns{
          display: flex;
          flex-flow: row nowrap;
        }
        .order-list-btn{
          &, &:hover, &:active, &:focus{
            width: 80px;
            width: 21.33vw;
            font-size: 15px;
            font-size: 4vw;
            padding: 5px 0;
            padding: 1.33vw 0;
            text-align: center;
            color: #fff;
            border: 0;
            border-radius: 5px;
            border-radius: 1.33vw;
            display: block;
            outline: none;
            &.pay {
                background: #64c879;
                border: 1px solid #64c879;
            }
            &.default {
                background: #fff;
                border: 1px solid #e5e5e5;
                color: #222222;
                margin-left: 15px;
                margin-left: 4vw;
            }
          }
        }
      }
    }
  }
}
